import { FC, useEffect, useState } from 'react';
import { Form, Table, Button, Input } from 'antd';
import type { TableProps } from 'antd';
import { SearchParams } from '../services/userinfo/type'
import { getList } from '../services/userinfo/index'
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';
// interface DataType {
//     key: string;
//     name: string;
//     age: number;
//     address: string;
//     tags: string[];
//   }
import Add from '../components/user/Add'
const Index: FC<any> = (props: any): JSX.Element => {
    const imgURl = import.meta.env.VITE_BASE_IMG_URL;
    const columns: TableProps<any>['columns'] = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '头像',
            dataIndex: 'photo',
            key: 'photo',
            render: (text) => (
                <>
                    <img src={imgURl + text} />

                </>
            )
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render: (text) => (text == 1 ? "男" : "女")
        },
        {
            title: '操作',
            key: 'id',
            dataIndex: 'id',
            render: (text,item) => (
                <>
                    <div>
                        <Button onClick={edit(item)} type="primary">修改</Button>
                        <Button onClick={del(text)} type="primary">删除</Button>
                    </div>
                </>
            ),
        },

    ];

    const del = (id: number) => {

        return () => {
            alert(id);
        }
    }
    const [data, setData] = useState<any>([])
    const [params, setParams] = useState<SearchParams>({ page: 1, psize: 10,key:"",name:"" });
    const [total, settotal] = useState(0);
    const [isAdd,setIsAdd]=useState(false);
    const [editData,setEditData]=useState<any>({})

    const add=()=>{
       
        setEditData({id:0})
        setIsAdd(true);
        
       
    }
    const edit=(item:any)=>{
        return ()=>{
        setEditData(item)
        setIsAdd(true);
        }
    }
    const closeFn=()=>{
        setIsAdd(false);
    }
    const getData = async () => {

        const res: any = await getList(params).catch(() => { });
        console.log(res);

        if (res?.errCode === 10000) {

            setData(res.data.list)
            settotal(res.data.counts)

        }
    }

    useEffect(() => {
        getData();
    }, [params])
    //   const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
    //     console.log(current, pageSize);
    //   };
    const onChange: PaginationProps['onChange'] = (page, psize) => {

        setParams({ ...params, page, psize })

    };
    const onFinish=(data:SearchParams)=>{

      
        setParams({ ...params, ...data,page:1 })
    }
    const [selectedKeys,setSelectedKeys]=useState<number[]>([37534,37533]);
    const rowSelection:any = {
        onChange: (selectedRowKeys: number[]) => {
            setSelectedKeys(selectedRowKeys);
        },
        selectedRowKeys:selectedKeys
      };
    return (
     <>
     <Form   layout="inline" onFinish={onFinish}>
          <Form.Item name="key" label="关键字">
            <Input></Input>
          </Form.Item>
          <Form.Item name="name" label="姓名">
            <Input></Input>
          </Form.Item>
          <Form.Item>
          <Button htmlType="submit" type="primary">搜索</Button>
          </Form.Item>
     </Form>
     <div>
     <Button onClick={add} type="primary">添加</Button>
     </div>
      <Table rowSelection={rowSelection} columns={columns} pagination={false}  rowKey="id" dataSource={data} />
      <div className='pages'>

      <Pagination
      showSizeChanger
      onChange={onChange}
 
      defaultCurrent={params.page}
      total={total}
    />
    </div>
    {
        isAdd && <Add data={editData} close={closeFn}></Add>
    }
  
     </>
    )
}
export default Index;